<template>
  <div class="liebiao">
    <ul v-for="v in liebiao" :key="v.id" @click="fun(v.id)">
      <li>
        <img :src="v.img" class="img" />
      </li>
      <li>
        <p>{{ v.name }}</p>
      </li>
      <li>
        <span class="biankuang">{{ v.zhijiang }}</span>
      </li>
      <li>
        <img
          src="https://m.xiaomiyoupin.com/youpin/static/m/res/images/secbuy/double_card_btn.png"
          class="img1"
        />
        <div class="xiafang">
          <h6 class="left">
            <p><span>￥</span>{{ v.money }}</p>
            <del>{{ v.del }}</del>
          </h6>
          <h5 class="right">
            <p>{{ v.textea }}</p>
          </h5>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "liebiao1",
  props: {
    type: String,
  },
  data() {
    return {
      typeObj: {
        biqiang: "",
        canchu: "",
      },
      liebiao: [],
    };
  },
  created() {
    axios
      .get("/liebiao2", {
        params: {
          type: this.type,
        },
      })
      .then((res) => {
        this.liebiao = res.data;
      })
      .catch((err) => {
        console.log("服务器出错了", err);
        alert("服务器出错了");
      });
  },
  methods: {
    fun(id) {
      this.$router.push({ path: "/xq", query: { id: id } });
    },
  },
};
</script>

<style scoped>
.liebiao {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  background-color: #ff333c;
}
.img {
  width: 1.71rem;
  height: 1.71rem;
}
ul {
  background-color: rgb(255, 255, 255);
  border-radius: 0.1rem;
  margin-top: 0.15rem;
  height: 3rem;
  width: 1.9rem;
}
ul p {
  font-size: 0.16rem;
}
li {
  margin: 0.05rem 0.1rem;
}
li:nth-child(4) {
  position: relative;
  margin-top: 0.15rem;
}
.img1 {
  width: 1.6rem;
  height: 0.46rem;
}
.xiafang {
  position: absolute;
  top: 0;
  color: white;
  width: 1.51rem;
  height: 0.38rem;
}
.left {
  font-weight: normal;
  float: left;
  margin-left: 0.1rem;
}
.left p {
  font-size: 0.18rem;
}
.left p span {
  font-size: 0.11rem;
}
.right {
  font-weight: normal;
  float: right;
  margin-right: 0.2rem;
  width: 0.5rem;
  font-size: 0.11rem;
}
.biankuang {
  border: 0.01rem solid red;
  color: red;
}
</style>